{% extends 'index.html' %}
{% block ace-content %}
<!-- ACE Editor -->   
<script src="http://cdn.bootcss.com/ace/1.2.4/ace.js"></script>
<script src="http://cdn.bootcss.com/ace/1.2.4/ext-language_tools.js"></script>
<script src="http://cdn.bootcss.com/ace/1.2.4/ext-old_ie.js"></script>
<script src="http://cdn.bootcss.com/ace/1.2.4/theme-monokai.js"></script> 
<link href="/static/dist/css/bootstrap-multiselect.css" rel="stylesheet">
<script src="/static/dist/js/bootstrap-multiselect.js"></script>
<style type="text/css">
	#project_local_command {
		/* position: absolute; */
	width: 100%;
	height: 400px;
   }	  
</style>
{% endblock %}
{% block page-content %}
<div id="page-wrapper">
    <div class="row">
         <div class="col-lg-12">
              <h1 class="page-header"><i class="fa  fa-wrench"></i> 项目配置中心</h1>
         </div>
                <!-- /.col-lg-12 -->
    </div>
	<div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
 						<i class="fa  fa-plus"></i> 添加项目
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-6">
                                <legend><i class="fa  fa-paper-plane"></i>部署服务器</legend>
                                    <form role="form" method="post" id="add_deploy_project">  {% csrf_token %}
                                        <div class="form-group">
                                            <label><font color='red'>* </font>产品线名称</label>
                                            <input class="form-control" id="project_name" value="{{project.project.project_name}}" disabled>
                                            <p class="help-block">例如：opsmanage.</p>
                                        </div>
										<div class="form-group">
											 <label><font color='red'>* </font>业务类型</label>
											 <select class="form-control" name="project_service" id="project_service" onchange="javascript:oBtServiceSelect('service','server');" required>
											 		{% for ds in serviceList %}
											 			{% if ds.id == project.project_service %}
											   				<option selected="selected" value="{{ds.id}}">{{ds.service_name}}</option>	
											   			{% else %}
											   				<option  value="{{ds.id}}">{{ds.service_name}}</option>
											   			{% endif %}
											   		{% endfor %}							   							
											</select>
										</div>  
										<div class="form-group">
											 <label><font color='red'>* </font>项目名称</label>
											 <input class="form-control" id="project_name" value="{{project.project_name}}" disabled>
										</div>											                                      
                                        <div class="form-group">
                                            <label><font color='red'>* </font>项目环境</label>
                                            <select class="form-control" id="project_env"  onchange="javascript:oBtEnvType();" required>
                                            	{% if project.project_env == 'sit' %}
	                                            	<option selected="selected" value="sit" name="project_env">测试环境</option>
	                                            	<option value="qa" name="project_env">预生产环境</option>
	                                            	<option value="uat" name="project_env">生产环境</option>      
	                                            {% elif project.project_env == 'qa' %}     
	                                            	<option value="sit" name="project_env">测试环境</option>
	                                            	<option selected="selected" value="qa" name="project_env">预生产环境</option>
	                                            	<option value="uat" name="project_env">生产环境</option> 	
	                                            {% elif project.project_env == 'uat' %}
	                                            	<option value="sit" name="project_env">测试环境</option>
	                                            	<option value="qa" name="project_env">预生产环境</option>
	                                            	<option selected="selected" value="uat" name="project_env">生产环境</option> 
	                                            {% else %}
													<option selected="selected" value="">请选择项目环境</option>
	                                            	<option value="sit" name="project_env">测试环境</option>
	                                            	<option value="qa" name="project_env">预生产环境</option>
	                                            	<option value="uat" name="project_env">生产环境</option> 	                                            		                                            	                                            	                                 		
                                            	{% endif %}

                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label><font color='red'>* </font>远程仓库类型</label>
                                            <select class="form-control" id="project_repertory"  required>
                                            	{% if project.project_repertory == 'git' %}
													<option value="git" name="project_repertory">Git</option>
                                            		<option value="svn" name="project_repertory">Svn</option>     
	                                            {% elif project.project_repertory == 'svn' %}     
													<option selected="selected" value="git" name="project_repertory">Git</option>
                                            		<option selected="selected" value="svn" name="project_repertory">Svn</option>  	
	                                            {% else %}
	                                            	<option selected="selected" value="">请选择仓库类型</option>
	                                            	<option value="git" name="project_repertory">Git</option>
	                                            	<option value="svn" name="project_repertory">Svn</option>	                                            		                                            	                                            	                                 		
                                            	{% endif %}                                            

                                            </select>
                                        </div>      
                                        <div class="form-group">
                                            <label><font color='red'>* </font>仓库地址</label>
                                            <input class="form-control" id="project_address" value="{{project.project_address|default:""}}" required>
                                            <p class="help-block">例如：git@github.com/welliamcao/VManagePlatform.git</p>
                                        </div>  
                                        {% if project.project_repertory == 'svn' %}
	                                     <div class="form-group">
	                                            <label>SVN账户/密码<i class="fa fa-info-circle" data-toggle="tooltip"  title="选择svn的账户密码"></i></label>
												<div class="form-inline from-group">
													<input type="text" class="form-control" id="project_repo_user" value="{{project.project_repo_user|default:""}}" placeholder="请输入账户">
													<input type="text" class="form-control" id="project_repo_passwd" value="{{project.project_repo_passwd|default:""}}" placeholder="请输入密码">
												</div>
	                                     </div>  
	                                     {% endif %}                                       
                                        <div class="form-group">
                                            <label><font color='red'>* </font>分支/Tag上线<i class="fa fa-info-circle" data-toggle="tooltip"  title="选择用branch还是tag作为版本控制"></i></label>
                                            <select class="form-control" id="project_model" required>
                                            	{% if project.project_model == 'branch' %}
                                            		<option value="">选择上线版本控制类型</option>
                                            		<option selected="selected" value="branch" name="project_model">Branch</option>
                                            		<option value="tag" name="project_model">Tag</option>
                                            		<option value="trunk" name="project_model">Trunk</option>
                                            	{% elif project.project_model == 'tag' %} 	
                                            		<option value="">选择上线版本控制类型</option>
                                            		<option value="branch" name="project_model">Branch</option>
                                            		<option selected="selected" value="tag" name="project_model">Tag</option> 
                                            		<option value="trunk" name="project_model">Trunk</option>
                                            	{% elif project.project_model == 'trunk' %}
                                            		<option selected="selected" value="">选择上线版本控制类型</option>
                                            		<option value="branch" name="project_model">Branch</option>
                                            		<option value="tag" name="project_model">Tag</option>   
                                            		<option value="trunk" selected="selected" name="project_model">Trunk</option>                                          		
                                            	{% endif %}                                            	
                                            </select>
                                        </div>   
										<div class="form-group" >			 		             
											<label ><font color='red'>* </font>语言类型: </label>	
											<div class="btn-group btn-group-sm">
												<button type="button" class="btn btn-default" onclick="setCompileMode('compile')"><a>编译型</a></button>
												<button type="button" class="btn btn-default" onclick="setCompileMode('noncompile')"><a>非编译型</a></button>
											</div>
										</div> 
										<div  id="compile" {% if project.project_type == "uncompile" %}style="display: none;"{% endif %}>
											<div class="form-group" >
												<label>编译命令<i class="fa fa-info-circle" data-toggle="tooltip" title="写入编译命令"></i></label>
												<div id="project_local_command" name="project_local_command" class="ace_editor">{{project.project_local_command}}</div>								
											</div>
	                                        <div class="form-group">
	                                            <label>编代码发布目录<i class="fa fa-info-circle" data-toggle="tooltip"  title="真实被同步代码的目录"></i></label>
	                                            <input class="form-control" id="project_dir" value="{{project.project_dir|default:""}}" required pattern="^/.*/$" title="正确格式：/path/" disabled>
	                                        </div>	
										</div>	    
                                        <div class="form-group">
                                            <label><font color='red'>* </font>源代码存放地址</label>
                                            <input class="form-control" id="project_repo_dir" value="{{project.project_repo_dir|default:""}}" required pattern="^/.*/$" title="正确格式：/path/" disabled>
                                        </div>  										                                                                           
                                        <div class="form-group">
                                            <label>排除文件<i class="fa fa-info-circle" data-toggle="tooltip"  title="项目目录的相对路径"></i></label>
                                            <textarea class="form-control" rows="3" id="project_exclude" >{{project.project_exclude|default:""}}</textarea>   
                                            <p class="help-block">例如：.git,data/upload</p>
                                        </div>                                          


                                        <button type="reset" class="btn btn-default" >撤销</button>
                                        <button type="button" class="btn btn-default" onclick="addDeployProject(this,'audit')" >提交</button>
                                    
                                </div>
                                <!-- /.col-lg-6 (nested) -->
                                <div class="col-lg-6">
                                    <legend><i class="fa  fa-paper-plane-o"></i>目标服务器</legend>
                                     <div class="form-group">
                                            <label><font color='red'>* </font>目标服务器</label>
                                            <br>
                                            <select multiple class="form-control"   name="server" id="server" required>
                                            	{% for ds in serverList %}
                                            		{% if ds.count == 1 %}
                                            			<option name="server" selected="selected"  value="{{ds.id}}">{{ds.ip}} | {{ds.project}} | {{ds.service}}</option>
                                            		{% else %}
                                            			<option name="server" value="{{ds.id}}">{{ds.ip}} | {{ds.project}} | {{ds.service}}</option>
                                            		{% endif %}
                                            	{% endfor %}
                                            </select>
                                        </div> 
                                        <div class="form-group">
                                            <label><font color='red'>* </font>用户<i class="fa fa-info-circle" data-toggle="tooltip"  title="部署服务跟目标服务器都需要创建该用户"></i></label>
                                            <input class="form-control" id="project_user" value="{{project.project_user|default:""}}" required pattern="^\w+$" title="不要输入非法字符">
                                            <p class="help-block">例如：www</p>
                                        </div>                                                                              
                                        <div class="form-group">
                                            <label><font color='red'>* </font>部署目录</label>
                                            <input class="form-control" id="dir" value="{{server.0.dir|default:""}}" required pattern="^/.*/$" title="正确格式：/path/" disabled>
                                            <p class="help-block">例如：/var/www/project/</p>
                                        </div>  
                                        <div class="form-group">
                                            <label>部署之后执行的命令</label>
                                            <textarea class="form-control" rows="3" id="project_remote_command">{{project.project_remote_command|default:""}}</textarea>
                                            <p class="help-block">例如：service nginx restart && service httpd restart</p>
                                        </div>                                        
                                </div>
                                {% if project.project_env == 'uat' %}
                                <!-- /.col-lg-6 (nested) -->
                                <div class="hr hr32 hr-dotted"></div>   
                                <div class="col-lg-6">
                                    <legend><i class="fa  fa-gears"></i> 扩展配置</legend>
                                     <div class="form-group">
                                            <label><font color='red'>* </font>部署授权组<i class="fa fa-info-circle" data-toggle="tooltip"  title="选择的用户组能够授权部署工单"></i></label>
                                            <br>
                                            
                                            <select class="form-control" id="project_audit_group">
                                            	<option  name="project_audit_group"  value="0">选择一个授权组</option>
                                            	{% for ds in groupList %}
                                            		{% if ds.id == project.project_audit_group %}
                                            			<option  name="project_audit_group" value="{{ds.id}}" selected="selected">{{ds.name}}</option>
                                            		{% else %}
                                            			<option  name="project_audit_group" value="{{ds.id}}">{{ds.name}}</option>
                                            		{% endif %}
                                            	{% endfor %}
                                            </select>
                                      </div>                                        
                                </div>
                                {% else %}
                                <div class="col-lg-6" id="extConfig" style="display:none;">
                                    <legend><i class="fa  fa-gears"></i> 扩展配置</legend>
                                     <div class="form-group">
                                            <label><font color='red'>* </font>部署授权组<i class="fa fa-info-circle" data-toggle="tooltip"  title="选择的用户组能够授权部署工单"></i></label>
                                            <br>
                                            <select class="form-control" id="project_audit_group">
                                            	<option  name="project_audit_group" selected="selected" value="0">选择一个授权组</option>
                                            	{% for ds in groupList %}
                                            		<option  name="project_audit_group" value="{{ds.id}}">{{ds.name}}</option>
                                            	{% endfor %}
                                            </select>
                                      </div>                                        
                                </div>                                
                     			{% endif %}
                               </form> 
                            </div>
                            <!-- /.row (nested) -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
</div>

<script type="text/javascript">
$(function () { $("[data-toggle='tooltip']").tooltip(); });
{% if errorInfo %}
	window.wxc.xcConfirm("{{errorInfo}}", window.wxc.xcConfirm.typeEnum.error);
{% endif %}

$(document).ready(function() {
    $('#server').multiselect({
        enableClickableOptGroups: true,
        enableCollapsibleOptGroups: true,
        includeSelectAllOption: true,
       	enableFiltering: true, 
    });
});

var project_type = '{{project.project_type}}';
function setCompileMode(id){
	if (id=='compile'){
		document.getElementById("compile").style.display = "";
		project_type = 'compile';
	}
	else{
		document.getElementById("compile").style.display = "none";	
		project_type = 'uncompile';
	}
	
}


function setAceEditMode(model) {
	var editor = ace.edit("project_local_command");
	require("ace/ext/old_ie");
	var langTools = ace.require("ace/ext/language_tools");
	editor.setTheme("ace/theme/monokai");
	editor.getSession().setMode("ace/mode/" + model);
	editor.setShowPrintMargin(false);
	editor.setOptions({
	    enableBasicAutocompletion: true,
	    enableSnippets: true,
	    enableLiveAutocompletion: true
	}); 
			 
};
setAceEditMode("sh");
function oBtServiceSelect(model,ids){
	   $('#server').removeAttr("disabled");
	   var obj = document.getElementById("project_service"); 
	   var index = obj.selectedIndex;
	   var sId = obj.options[index].value; 
	   if ( sId  > 0){	 
			$.ajax({
				dataType: "JSON",
				url:'/assets_server/', //请求地址
				type:"POST",  //提交类似
				data:{
					"query":model,
					"id":sId
				},
				success:function(response){
					var binlogHtml = '<select multiple class="form-control"  name="server" id="server"  required>'
					var selectHtml = '';
					for (var i=0; i <response["data"].length; i++){
						 selectHtml += '<option name="server" value="'+ response["data"][i]["id"] +'">' + response["data"][i]["ip"] + '</option>' 
					};                        
					binlogHtml =  binlogHtml + selectHtml + '</select>';
					document.getElementById("server").innerHTML= binlogHtml;							
				},
			});	
	   }
	   else{
		   $('#server option:selected').empty();
		   $('#server').attr("disabled",true);
	   }

}

function oBtEnvType() {
	   var obj = document.getElementById("project_env"); 
	   var index = obj.selectedIndex;
	   var value = obj.options[index].value; 
	   if (value=="uat"){
		   document.getElementById("extConfig").style.display = "";  	   
	   }
	   else {
		   document.getElementById("extConfig").style.display = "none";	
	   }
}


function addDeployProject(obj) {	
	var btnObj = $(obj);
	var required = ["project_id","project_service","project_name","project_env","project_repertory","project_address","server","project_user","dir"];
	btnObj.attr('disabled',true);
		var form = document.getElementById('add_deploy_project');
		for (var i = 0; i < form.length; ++i) {
			var name = form[i].name;
			var value = form[i].value;	
			idx = $.inArray(name, required);						
			if (idx >= 0 && value.length == 0){
				window.wxc.xcConfirm("请注意必填项不能为空~", window.wxc.xcConfirm.typeEnum.error);
				btnObj.removeAttr('disabled');
				return false;
			};					
		};				
		var editor = ace.edit("project_local_command");
	    var project_local_command = editor.getSession().getValue(); 
	    var formData = new FormData();	
		var serverList = new Array();
		$("#server option:selected").each(function () {
			serverList.push($(this).val())
		})	    
	    formData.append('project_env',$('#project_env').val());	
	    formData.append('project_name',$('#project_name').val());	 
	    formData.append('project_address',$('#project_address').val());	
	    formData.append('project_user',$('#project_user').val());
	    formData.append('dir',$('#dir').val());		
	    formData.append('project_remote_command',$('#project_remote_command').val());
	    formData.append('project_exclude',$('#project_exclude').val());	
	    formData.append('project_dir',$('#project_dir').val());	
	    formData.append('project_repo_dir',$('#project_repo_dir').val());
	    {% if project.project_repertory == 'svn' %}
	    formData.append('project_repo_user',$('#project_repo_user').val());	
	    formData.append('project_repo_passwd',$('#project_repo_passwd').val());
	    {% endif %}
	    formData.append('project_audit_group',$('#project_audit_group  option:selected').val());	
	    formData.append('project_id',$('#project_id option:selected').val());
	    formData.append('project_service',$('#project_service option:selected').val());
	    formData.append('project_repertory',$('#project_repertory option:selected').val());
	    formData.append('project_model',$('#project_model option:selected').val());	
	    formData.append('server',serverList);	
	    formData.append('project_local_command',project_local_command);
	    formData.append('project_type',project_type);
		$.ajax({
/* 				dataType: "JSON", */
			url:'/deploy_mod/' + {{project.id}} + '/', //请求地址
			type:"POST",  //提交类似
		    processData: false,
		    contentType: false,				
			data:formData,  //提交参数
			success:function(response){
				btnObj.removeAttr('disabled');				
				if (response["code"] == 200){
					window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);
				}
				else {
					window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
				};
			},
	    	error:function(response){
	    		btnObj.removeAttr('disabled');
	    		window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
	    	}
		});	
	}


</script>

{% endblock %}